<template>
	<view class="boxAll">
		<Totle title="互动消息"></Totle>
		<view class="box1">
			<view class="box_img">
				<image src="https://img2.baidu.com/it/u=2462971941,1032368961&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500" alt="" class="_img" />
				<p style="font-size: 37rpx;">游客ad53s415f44</p>
				<p>评论了你 <span>12-20</span></p>
				<button class="okLook1" @click="Look()">封面</button>
			</view>
		</view>

		<view class="box1">
			<view class="box_img">
				<image src="https://img2.baidu.com/it/u=1028960769,2252655424&fm=253&fmt=auto&app=138&f=JPEG?w=418&h=604" alt="" class="_img" />
				<p style="font-size: 37rpx;">游客2ssd2d1f5e1</p>
				<p>评论了你 <span>12-20</span></p>
				<button class="okLook1" @click="Look()">封面</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import Totle from "../../Totle.vue";

	const Look = () => {
		uni.navigateTo({
			url: "/pages/Cover/Cover"
		});
	};
</script>

<style lang="scss">
	.boxAll {
		width: 100vw;
		height: 100vh;
		background-color: black;
		color: white;
	}

	.box1 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100vw;
		height: 4.5rem;
		background-color: black;
		border-bottom: 1px solid gray;
	}

	.box_img {
		width: 60%;
		height: 100%;
		display: flex;
		justify-content: center;
		margin-left: 1rem;
		flex-direction: column;
		flex-wrap: wrap;
	}

	._img {
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		margin-right: 0.5rem;
	}

	.okLook1 {
		border-radius: 20px;
		background-color: gray;
		color: white;
		display: block;
		font-size: 23rpx;
		margin-left: 40%;
	}
</style>